<!DOCTYPE html>
<html lang="en">

<head>
    {ms:include filename=headFile.htm/} 
</head>

<body>
    <div id="appCtrl" v-locak>
        <mt-header title="理赔中心">
            <a href="javascript:;" @click="history.go(-1)" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        
        <div>
            <img src="{ms:globalskin.url/}/images/claims.jpg" width="100%" alt="">
        </div>
        

        <div class="book-form">
            <h2>预约您的专属理赔顾问</h2>
            <div class="mt-cell-group mt-cell-left" style="margin-top: 0;padding-top: 0;">
                 <mt-field 
                label="您的姓名" 
                placeholder="请输入您的姓名" 
                v-model.trim="name"></mt-field>
                <mt-cell
                title="性别">
                <mt-radio-group 
                color="#C99D68" 
                name="gender"
                v-model="gender">
                    <mt-radio :val="0">
                    男</mt-radio>
                    <mt-radio :val="1">
                    女</mt-radio>
                </mt-radio-group>                
            </mt-cell>

            <mt-field 
            label="手机号码" 
            placeholder="请输入手机号码" 
            v-model.trim="mobile"></mt-field>

            <div style="margin:10px;">
                <mt-button type="primary" size="large" @click="submit">
                   理赔申请
                </mt-button>   
            </div>
            <p class="book-help cGray"><i></i>申请24小时，   理赔顾问会联系您完成理赔申请</p>
            </div>
        </div>

        <div class="book-form" style="padding-bottom: 20px;margin-bottom: 10px">
            <h2>预约您的专属 理赔</h2>
            <div style="margin: 0 15px">
                 <img src="{ms:globalskin.url/}/images/book_process.png" width="100%" alt="">
            </div>
        </div>
    </div>

   
 		{ms:include filename=foot.htm/} 
    <script>
    var vm = new Vue({
        el: '#appCtrl',

        data: function(){
            return {
                name:'',
                gender:0,
                mobile:''
            }
        },

        methods:{
            submit: function(){
                if(!this.name){
                    this.$toast('请输入真实姓名')
                    return;
                }
            
                if(!this.mobile){
                    this.$toast('请输入手机号码');
                    return;
                }
                if(!/^0?(13|15|18|14|16|17|19)[0-9]{9}$/.test(this.mobile)){
                    this.$toast('手机号码格式有误');
                    return;
                }

                //alert('这里编写保存')
                // $.ajax()

            }
           
        }
    })
    </script>
</body>

</html>